<script setup>
  const props = defineProps({
    width: {
      type: Number,
      default: 16
    },
    height: {
      type: Number,
      default: 16
    },
    prefix: {
      type: String,
      default: 'icon'
    },
    name: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default: '#333'
    }
  });
  const symbolId = computed(() => `#${props.prefix}-${props.name}`);
  const fillColor = computed(() => `${props.color}`);
</script>

<template>
  <svg :width="width" :height="height" aria-hidden="true">
    <use :xlink:href="symbolId" :fill="fillColor" />
  </svg>
</template>
